<template>
  <ele-page>
    <!-- 搜索表单 -->

    <ele-card :body-style="{ paddingTop: '8px' }">
      <!-- 表格 -->
      <ele-pro-table
        ref="tableRef"
        row-key="userId"
        :columns="columns"
        :datasource="datasource"
        :show-overflow-tooltip="true"
        v-model:selections="selections"
        highlight-current-row
        border
      >
        <template #toolbar>
          <el-button
            type="success"
            class="ele-btn-icon"
            :icon="Plus"
            @click="openEdit()"
          >
            新建报销申请
          </el-button>
        </template>

        <template #contact="{ row }">
          <el-tag
            v-for="item in row.contacts"
            :key="item.id"
            size="small"
            :disable-transitions="true"
            style="margin-right: 6px"
          >
            {{ item.contacts_name }}:{{ item.contacts_tel }}
          </el-tag>
          <br />
        </template>
        <template #status="{ row }">
          <span v-if="row.status === '/'"></span>
          <el-tag v-else :type="statusFilter(row.status)">
            {{ statusText(row.status) }}
          </el-tag>
        </template>
        <template #action="{ row }">
          <el-button-group>
            <el-button
              v-if="row.status !== '/'"
              type="primary"
              size="small"
              @click="openImages(row)"
              >查看图片</el-button
            >
            <el-button
              v-if="row.status !== '/'"
              type="success"
              size="small"
              @click="openEdit(row)"
              >再次申请</el-button
            >
            <el-button
              v-if="row.status === 0"
              type="danger"
              size="small"
              @click="remove(row)"
              >删除</el-button
            >
          </el-button-group>
        </template>
      </ele-pro-table>
    </ele-card>
    <!-- 编辑弹窗 -->
    <edit v-model="showEdit" :data="current" @done="reload" />
    <images v-model="showImages" :images-list="imagesList" />
  </ele-page>
</template>

<script setup>
  import { ref } from 'vue';
  import { Plus } from '@element-plus/icons-vue';
  import Edit from './components/edit.vue';
  import Images from '@/components/ImagesList/index.vue';
  import { pageOaCost, delOaCost } from '@/api/oa';
  import { ElMessageBox } from 'element-plus/es';
  import { EleMessage } from 'ele-admin-plus/es';

  /** 表格实例 */
  const tableRef = ref(null);

  /** 表格列配置 */
  const columns = ref([
    {
      prop: 'id',
      width: 90,
      label: 'ID'
    },
    {
      slot: 'status',
      label: '状态',
      width: 120
    },
    {
      prop: 'project',
      label: '项目',
      width: 130
    },
    {
      prop: 'cate',
      label: '分类',
      width: 130
    },
    {
      prop: 'amount',
      label: '金额',
      width: 100
    },
    {
      prop: 'note',
      label: '说明'
    },
    {
      prop: 'judge_content',
      label: '拒绝原因',
      width: 300
    },
    {
      prop: 'create_time',
      label: '申请时间',
      width: 140
    },
    {
      columnKey: 'action',
      label: '操作',
      width: 230,
      align: 'center',
      slot: 'action'
    }
  ]);

  const statusText = (value) => {
    const cs = {
      9: '未通过',
      8: '已完成',
      2: '待打款',
      1: '待财务审核',
      0: '待经理审核'
    };
    return cs[value];
  };
  const statusFilter = (status) => {
    const statusMap = {
      9: 'danger',
      8: 'success',
      2: 'warning',
      1: 'warning',
      0: 'info'
    };
    return statusMap[status];
  };

  /** 表格选中数据 */
  const selections = ref([]);

  /** 当前编辑数据 */
  const current = ref(null);

  /** 是否显示编辑弹窗 */
  const showEdit = ref(false);

  /** 表格数据源 */
  const datasource = ({ page, limit, where, orders }) => {
    return pageOaCost({
      ...where,
      ...orders,
      page,
      limit,
      create_user_id: 1
    });
  };

  /** 搜索 */
  const reload = (where) => {
    selections.value = [];
    tableRef.value?.reload?.({ page: 1, where });
  };

  /** 打开编辑弹窗 */
  const openEdit = (row) => {
    current.value = row ?? null;
    showEdit.value = true;
  };

  /** 查看图片 */
  const imagesList = ref([]);
  const showImages = ref(false);
  const openImages = (row) => {
    imagesList.value = row.imagesArr ?? [];
    showImages.value = true;
  };

  /** 删除单个 */
  const remove = (row) => {
    ElMessageBox.confirm(
      '确定要删除“' + row.cate + row.project + row.amount + '”元的报销申请吗?',
      '系统提示',
      { type: 'warning', draggable: true }
    )
      .then(() => {
        const loading = EleMessage.loading('请求中..');
        const id = row.id;
        delOaCost({ id })
          .then((msg) => {
            loading.close();
            EleMessage.success(msg);
            reload();
          })
          .catch((e) => {
            loading.close();
            EleMessage.error(e.message);
          });
      })
      .catch(() => {});
  };
</script>

<script>
  export default {
    name: 'SystemUser'
  };
</script>
